// <div>
// 	<span>title</span>
// 	<ul>
// 		<li>1</li>
// 		<li>2</li>
// 	</ul>
// </div>

// 吧DOM结构转换为DOM树
// {
// 	tag: "DIV",
// 	children: [{
// 			tag: "span",
// 			text: "title"
// 			children: []

// 		},
// 		{
// 			tag: 'ul',
// 			children: [{
// 					tag: "li",
// 					text: "1",
// 					children: []
// 				},
// 				{
// 					tag: "li",
// 					text: "2",
// 					children: []
// 				}
// 			]
// 		}
// 	]
// }

// 将DOM结构生成DOM树
function createDomTree(dom) {
	// 维护一个对象
	let DomTree = {}
	DomTree.tag = dom.tagName
	DomTree.children = []

	dom.childNodes.forEach(child => {
		// 递归自己
		DomTree.children.push(createDomTree(child))
	})

	return DomTree
}
console.log(createDomTree(document.getElementById("wrap")));


// 将DOM树生成DOM结构
function renderDomObj(vnode) {
	if (typeof vnode === 'string') { //文本DOM结构
		return document.createTextNode(vnode)
	}

	const DomTree = document.createElement(vnode.tag)
	vnode.children.forEach(child => {
		// let childTree = document.createElement(child.tag)
		// DomTree.appendChild(childTree)
		DomTree.appendChild(renderDomObj(child))
	})
	return DomTree
}
